<!--
 * @Description: 
 * @version: 
 * @Author: m
 * @LastEditors: m
-->
<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>用户登陆</p>
		</header>

		<!-- 表单部分 -->
		<ul class="form-box">
			<li>
				<div class="title">
					手机号码：
				</div>
				<div class="content">
					<input type="text" placeholder="手机号码" v-model="form.userName" />
				</div>
			</li>
			<li>
				<div class="title">
					密码：
				</div>
				<div class="content">
					<input type="password" placeholder="密码" v-model="form.password" />
				</div>
			</li>
		</ul>

		<div class="button-login">
			<button @click="login">登陆</button>
		</div>
		<div class="button-register">
			<button @click="toRegister">注册</button>
		</div>

		<!-- 底部菜单部分 -->
		<ul class="footer">
			<li @click="toHome">
				<i class="fa fa-home"></i>
				<p>首页</p>
			</li>
			<li>
				<i class="fa fa-compass"></i>
				<p>发现</p>
			</li>
			<li @click="toOrderList">
				<i class="fa fa-file-text-o"></i>
				<p>订单</p>
			</li>
			<li>
				<i class="fa fa-user-o"></i>
				<p>我的</p>
			</li>
		</ul>
	</div>
</template>

<script>
import { login } from "@/api/user.js";
import { setToken } from "@/utils/auth";

export default {
	data() {
		return {
			form: {
				userName: "",
				password: "",
			},
		};
	},
	methods: {
		login() {
			if (!this.form.userName) {
				return this.$toast.fail("请填写用户名!");
			}

			if (!this.form.password) {
				return this.$toast.fail("请填写密码!");
			}

			login(this.form)
				.then((res) => {
					setToken(res.data.token);
					this.$router.push("/");
				})
				.catch((res) => {
					console.log(res);
					return this.$toast.fail("网络连接错误,请稍后重试!");
				});
		},
		toRegister() {
			this.$router.push({ path: "/register" });
		},
		toOrderList() {
			this.$router.push({ path: "/order" });
		},
		toHome() {
			this.$router.push({ path: "/" });
		},
		toPersonal() {
			this.$router.push({ path: "/personal" });
		},
	},
};
</script>
<style lang="scss" scoped>
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097ff;
	color: #fff;
	font-size: 4.8vw;

	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;

	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 表单部分 ******************/
.wrapper .form-box {
	width: 100%;
	margin-top: 12vw;
}
.wrapper .form-box li {
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
	display: flex;
	align-items: center;
}
.wrapper .form-box li .title {
	flex: 0 0 18vw;
	font-size: 3vw;
	font-weight: 700;
	color: #666;
}
.wrapper .form-box li .content {
	flex: 1;
}
.wrapper .form-box li .content input {
	border: none;
	outline: none;
	width: 100%;
	height: 4vw;
	font-size: 3vw;
}
.wrapper .button-login {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}
.wrapper .button-login button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #fff;
	background-color: #38ca73;
	border-radius: 4px;

	border: none;
	outline: none;
}
.wrapper .button-register {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}
.wrapper .button-register button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	/*与上面登陆按钮不同的只有颜色、背景色、边框不同*/
	color: #666;
	background-color: #eee;
	border: solid 1px #ddd;
	border-radius: 4px;

	border: none;
	outline: none;
}
/****************** 底部菜单部分 ******************/
.wrapper .footer {
	width: 100%;
	height: 14vw;
	border-top: solid 1px #ddd;
	background-color: #fff;

	position: fixed;
	left: 0;
	bottom: 0;

	display: flex;
	justify-content: space-around;
	align-items: center;
}
.wrapper .footer li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	color: #999;
	user-select: none;
	cursor: pointer;
}
.wrapper .footer li p {
	font-size: 2.8vw;
}
.wrapper .footer li i {
	font-size: 5vw;
}
</style>
